<template>
  <div class="recommend-product table-theme">
    <el-button type="primary" @click="assios">关联产品</el-button>
    <el-table :data="list" stripe style="margin-top: 20px">
      <el-table-column label="序号" align="center" width="80" prop="id"></el-table-column>
      <el-table-column label="名称" prop="goods_name" align="center"></el-table-column>
      <el-table-column label="工厂货号" prop="goods_sn" align="center"></el-table-column>
      <el-table-column label="品类" prop="class_name" align="center"></el-table-column>
      <el-table-column label="添加时间" prop="add_time" align="center"></el-table-column>
      <el-table-column label="商品图" align="center" width="100">
        <template slot-scope="scope">
          <ImgPopover :src="scope.row.goods_image"></ImgPopover>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center" width="100">
        <template #default="{row}">
          <el-input v-model="row.sort" placeholder="" @blur="setSort($event,row.sort,row.id)"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="{row}">
          <el-tag :type="row.is_sale==1?'primary':'danger'">{{row.is_sale==1?'上架':'下架'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template #default="{row}">
          <el-button type="danger" size="mini" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
    </div>
  </div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import recommend from '@/components/layer-dialog/good-recommend.vue';
export default {
  props: {
    layerid: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: 0
    },
    factory_id: {
      type: Number,
      default: 0
    },
  },
  data () {
    return {
      total: 0,
      page: 1,
      list: []
    };
  },
  components: {
    ImgPopover
  },
  computed: {},
  mounted(){
    this.init()
  },
  methods: {
    async init(e){
      const { datas } = await this.$http(this.$ApiList.seniorFactoryGoodsList,{senior_factory_id: this.id})
      this.total = datas.count
      this.list = datas.data
    },
    async setSort(e,sort,id){
      if(sort){
        await this.$http(this.$ApiList.seniorFactoryGoodsUp,{id,sort})
        this.init()
      }
    },
    del(row){
      this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http(this.$ApiList.seniorFactoryGoodsDel,{id: row.id})
        this.init()
      }).catch(() => {});
    },
    assios(){
      this.$layer.iframe({
        title: '选择商品',
        maxmin: true,
        area: ['50%', '60%'],
        content: {
          content: recommend, //传递的组件对象
          parent: this, //当前的vue对象
          data: {
            id: this.id,
            factory_id: this.factory_id
          } //props
        }
      });
    }
  }
}
</script>

<style lang='scss'>
  .recommend-product{
    flex: 1;
    min-width: 0;
    padding: 20px;
  }
</style>